<template>
  <div style="background: #ffffff;border-radius: 4px">
    <a-spin tip="Loading..." :spinning="spin">
      <a-row style="padding: 20px;box-sizing: border-box">
        <a-col :span="24">
          <a-button :class="[select==2?'active':'']" style="margin-right: 10px" @click="monthBtn">
            月
          </a-button>
          <a-button :class="[select==1?'active':'']" style="margin-right: 10px"
                    @click="dateBtn">
            日
          </a-button>
          <a-date-picker v-if="date" v-model="dates" @change="datesBtns"
                         style="width: 200px;margin-right: 20px;"/>
          <a-month-picker v-if="month" v-model="months" @change="monthsBtns"
                          style="width: 200px;margin-right: 20px;" placeholder="请选择月份"/>
          <!--        <a-date-picker-->
          <!--          mode="year"-->
          <!--          v-show="year"-->
          <!--          v-model="yearQuarter"-->
          <!--          placeholder="请选择年份"-->
          <!--          format='YYYY'-->
          <!--          style="width: 200px;margin-right: 20px;"-->
          <!--          :open='yearShowOne'-->
          <!--          @openChange="openChangeOne"-->
          <!--          @panelChange="panelChangeOne"/>-->
          <a-button type="primary" @click="search" style="background: #3C67F1;border: none;width: 114px;height: 32px">查询
          </a-button>
        </a-col>

      </a-row>
      <div class="line"></div>
      <span
        style="position:relative;bottom: -43px;left: 20px;font-size: 18px;font-family: PingFang SC;font-weight: bold;color: #333333;margin-right: 80px">月数据分析</span>
      <a-tabs style="margin-top: 10px;padding: 0px 20px 0 20px;box-sizing: border-box" default-active-key="1"
              type="card">
        <a-tab-pane key="1">
        <span slot="tab">
        <a-icon type="bar-chart"/>
        图表
      </span>
          <a-row style="margin-top: 10px">
            <a-col :span="24" style="text-align: right">
              <a-button type="primary" @click="exportBtn">
                导出
              </a-button>
            </a-col>
            <a-col :span="24">
              <a-radio-group v-model="datad">
                <a-radio :value="1">温度</a-radio>
                <a-radio :value="2">湿度</a-radio>
              </a-radio-group>
            </a-col>

            <a-col :span="24">
              <div style="width: 100%; height: 62.4vh">
                <div style="width: 100%; height: 100%" id="analysis"></div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" force-render>
         <span slot="tab">
        <a-icon type="pic-left"/>
        报表
      </span>
          <!--        <div-->
          <!--          style="width: 140px;height: 50px;display: flex; margin: 20px auto;align-items: center;justify-content: space-between;font-size: 20px;font-weight: bolder;">-->
          <!--          月数据分析-->
          <!--        </div>-->
          <a-col :span="24" style="text-align: right;margin-bottom: 15px;">
            <!--            <a-button icon="export"-->
            <!--                      style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"-->
            <!--                      type="primary" ghost>导出-->
            <!--            </a-button>-->
          </a-col>
          <a-col :span="24">
            <a-table :pagination="false" :rowKey="(record,index)=>{return index}" style="display:block;"
                     :data-source="list" bordered :columns="columns">
             <span slot="indexRender" slot-scope="record, index, indent, expanded">
                {{ indent + 1 }}
         </span>
            </a-table>
            <div style="margin: 10px; text-align: right">
              <a-pagination v-model="pageNo" :total="total" @change="onShowSizeChange" show-less-items/>
            </div>
          </a-col>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </div>
</template>
<script>
import STable from '@/components/table/'
import {list} from '@/api/meteorological'
import {weatherHistoryDate, weatherHistoryImage} from '@/api/device'

export default {
  components: {
    STable
  },
  data() {
    return {
      select: 1,
      datad: 1,
      yearShowOne: false,
      yearQuarter: '',
      date: true,
      month: false,
      year: false,
      pageNo: 1,
      pageSize: 10,
      list: [],
      total: 0,
      listX: [],
      listWd: [],
      listPj: [],
      listZd: [],
      dates: '',
      months: '',
      dateCOl: true,
      dateCOls: false,
      spin: false,
      image: '',
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          scopedSlots: {customRender: 'indexRender'}
        },
        {
          title: '风速（m/s）',
          dataIndex: 'windSpeed',
        },
        {
          title: '风向（m/s）',
          dataIndex: 'pressure',
        },
        {
          title: '累计雨量（mm）',
          dataIndex: 'ylThree',
        },
        {
          title: '瞬时雨量（mm）',
          dataIndex: 'ylFour',
        },
        {
          title: '当前雨量（mm）',
          dataIndex: 'ylFive',
        },
        {
          title: '温度（C）',
          dataIndex: 'temperature',
        },
        {
          title: '湿度（C）',
          dataIndex: 'ylTwo',
        },
      ],
    }
  },
  mounted() {
    // 折线图
    this.dataList(this.pageNo, this.pageSize)
    this.search()
  },
  methods: {
    exportBtn() {
      console.log(this.image)
      let parameter = {
        image: this.image
      }
      weatherHistoryImage(parameter).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = '气象数据' + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    search() {
      this.spin = true
      let dataList = this.datad == 1 ? 'wd' : 'sd'
      weatherHistoryDate(this.months, this.dates, dataList).then(res => {
        this.spin = false
        this.listX = res.result.listX.map(item => item.value)
        this.listWd = res.result.listYD.map(item => item.name)
        this.listPj = res.result.listYG.map(item => item.name)
        this.listZd = res.result.listYP.map(item => item.name)
        this.analysis(this.listX, this.listWd, this.listPj, this.listZd)
      }).catch(err => {
        this.spin = false
      })
    },
    datesBtns(value, date) {
      this.months = ''
      this.dates = date
    },
    monthsBtns(value, date) {
      this.dates = ''
      this.months = date
      this.dateCOls = true
    },
    // 分页
    onShowSizeChange(pageNo, pageSize) {
      console.log(pageNo, pageSize);
      this.dataList(pageNo, pageSize)
    },
    // 获取数据
    dataList(pageNo, pageSize) {
      list(pageNo, pageSize).then(res => {
        // console.log(res)
        this.list = res.result.records
        this.total = res.result.total
      }).catch(err => {

      })
    },
    // 选择年
    yearBtn() {
      this.date = false
      this.month = false
      this.year = true

    },
    // 选择月
    monthBtn() {
      this.select = 2
      this.date = false
      this.month = true
      this.year = false
    },
    // 选择日
    dateBtn() {
      this.select = 1
      this.date = true
      this.month = false
      this.year = false
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.yearQuarter = value;
      this.yearShowOne = false;
    },
    // 折线图
    analysis(xAxisDatas, yAxisData1s, yAxisData2s, yAxisData3s) {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('analysis') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      let color = ['#FFB64E', '#FF1515', '#5894FF']
      let xAxisData = xAxisDatas
      let yAxisData1 = yAxisData1s
      let yAxisData2 = yAxisData2s
      let yAxisData3 = yAxisData3s

      const hexToRgba = (hex, opacity) => {
        let rgbaColor = ''
        let reg = /^#[\da-f]{6}$/i
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
            '0x' + hex.slice(5, 7)
          )},${opacity})`
        }
        return rgbaColor
      }
      myChart.setOption({
        grid: {
          left: '3%',
          bottom: '15%',
          top: '20%',
          right: '2%'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {show: true}
          }
        },
        color: color,
        legend: {
          top: 20,
          // orient: 'vertical',
          // left: 'left',
          // data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5391FF'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '温度(℃)',
            axisLabel: {
              textStyle: {
                color: '#666'
              }
            },
            nameTextStyle: {
              color: '#666',
              fontSize: 12,
              lineHeight: 40
            },
            // 分割线
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        "dataZoom": [{
          "show": true,
          "height": 12,
          "xAxisIndex": [
            0
          ],
          bottom: '8%',
          "start": 10,
          "end": 90,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: "#d3dee5",

          },
          textStyle: {
            color: "#fff"
          },
          borderColor: "#90979c"
        }, {
          "type": "inside",
          "show": true,
          "height": 15,
          "start": 1,
          "end": 35
        }],
        series: [
          {
            name: '最高温度',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
              }
            },
            symbol: 'circle', //数据交叉点样式
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData1
          },
          {
            name: '平均温度',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {},
            symbol: 'circle', //数据交叉点样式 (实心点)

            data: yAxisData2
          },
          {
            name: '最低温度',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {},
            symbol: 'circle', //数据交叉点样式 (实心点)
            data: yAxisData3
          }
        ]
      })
      setInterval(() => {
        this.image = myChart.getDataURL();
      }, 1000)
      // console.log('212121', this.image)
    }
  }
}
</script>

<style scoped>
.ant-radio-button-wrapper:not(:first-child)::before {
  display: none;
}

.line {
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  border-bottom: 1px solid #DFE1E2;
}

/deep/ .ant-tabs-bar {
  border-bottom: none;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  width: 80px;
  height: 30px;
  background: #FFFFFF;
  border: 1px solid #417CF2;
  border-radius: 15px;
}

/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: #417CF2;
  color: #fff !important;
  border: 1px solid #417CF2;
  border-radius: 15px;
  /*margin: 0 15px 0 0 ;*/
}

/deep/ .ant-tabs-nav .ant-tabs-tab {
  width: 100px !important;
  height: 30px !important;
  line-height: 30px !important;
  background: #fff;
  color: #1D79FA !important;
  border: 1px solid #417CF2 !important;
  border-radius: 15px !important;
  margin: 0 5px !important;
}

/deep/ .ant-tabs-nav {
  padding-left: 150px !important;
}

/deep/ .ant-btn:hover, .ant-btn:focus {
  background: #8590A6;
  color: #fff;
  border-color: #8590A6;
  border-radius: 3px;
}

.active {
  background: #8590A6;
  border-color: #8590A6;
  color: #fff;
}
</style>